<template>
  <div>
    <p>歌单详情</p>
    <img :src="imgUrl" alt=""  width="400"/>
    <div class="list" v-for="(item, index) in songList" :key="index">
      <span>{{ item.name }}</span> |
      <span>{{ item.ar[0].name }}</span>
      <router-link :to="'/listen/'+item.id">
        <img width="50" :src="item.al.picUrl" alt="" />
      </router-link>
    </div>
  </div>
</template>

<script>
import { getPlayListSongsById } from "../http";
export default {
  data() {
    return {
      imgUrl: "",
      songList: [],
    };
  },
  created() {
    this.getDetail();
    this.getSongs();
  },
  methods: {
    getDetail() {
      // 如果没有指定地址，就会默认向当前地址发请求
      this.$http("/playlist/detail", {
        params: {
          id: this.$route.params.id,
        },
      }).then((res) => {
        this.imgUrl = res.playlist.coverImgUrl;
      });
    },
    async getSongs() {
      // async...await是为了解决异步代码执行顺序异常的问题 加了他们之后 就可以看作是同步代码
      let res = await getPlayListSongsById(this.$route.params.id);
      this.songList = res.songs;
    },
  },
};
</script>

<style>
.list {
  padding: 20px;
  border-bottom: 1px solid #999;
}
</style>